<template>
	<view class="">
		<view class="search-view main-bg-color">
			<view class="search-view-next">
				<input  type="text" v-model="content" placeholder="搜索商品 发现更多宝贝" />
				<view class="button-search" @tap="toSearchList"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			content:{
				type:String,
				default:""
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			toSearchList(){
				//因为搜索页，和搜索结果页都引入了这个组件，而searchList页面不需要跳转路由
				var pages = getCurrentPages();  //获取当前页面栈的实例
				var page = (pages[pages.length - 1]).route;  //获取当前页面的路由
				console.log(page)
				if(page==='pages/searchList/searchList'){
					console.log("当前是搜索结果页")
				}else{
					uni.navigateTo({
						url:"../../pages/searchList/searchList?content="+this.content
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	.search-view {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.search-view-next {
			width: 90%;
			background-color: #FFFFFF;
			border-radius: 50rpx;
			height: 75rpx;
			display: flex;
			align-items: center;
			input {
				margin-left: 20rpx;
				font-size: 30rpx;
				flex: 1;
			}
			.button-search {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 75rpx;
				width: 75rpx;
			}
			.button-search:before {
				
				font-family: "iconfont" !important; //一定要设置font-family：“iconfont”不然字体无法出来
				content: "\e6e3"; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
				color: #CCCCCC;
			}
		}
	}

	// .search-view {
	// 	height: 100rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	padding: 0 40rpx;
	// 	input {
	// 		background-color: #FFFFFF;
	// 		height: 80rpx;
	// 		flex: 1;
	// 		border-radius: 50rpx;
	// 		padding: 0 30rpx;
	// 		font-size: 30rpx;

	// 	}

	// 	// 使用before和相对定位向input中插入图标
	// 	//用到的技术：before伪元素、自绝父相
	// 	.button-search{
	// 		position: relative;
	// 		right: 40rpx;
	// 		border: 0rpx solid #FFFFFF;
	// 		background-color: #FFFFFF;
	// 		width: 80rpx;
	// 		height: 80rpx;

	// 	}
	// 	.button-search:before {
	// 		position: absolute;
	// 		top: 22rpx;
	// 		right: 20rpx;
	// 		font-family: "iconfont" !important; //一定要设置font-family：“iconfont”不然字体无法出来
	// 		content: "\e6e3"; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
	// 		color: #CCCCCC;
	// 	}
	// }
</style>
